<template>
  <div class="app-container">
    <div class="header">
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单" :description="order.addTime"></el-step>
        <el-step title="支付订单" :description="order.payTime"></el-step>
        <el-step title="平台发货" description></el-step>
        <el-step title="确认收货" description></el-step>
        <el-step title="完成评价" description></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{order.StatusText}}</span>
        <div class="operate-button-container">
          <el-button size="mini" type="primary" @click="delivery" v-if="order.status===1">订单发货</el-button>
          <el-button size="mini" @click="editAddress" v-if="order.status<2">修改收货人信息</el-button>
          <el-button size="mini" @click="expressInquiry" v-if="order.status===2">订单追踪</el-button>
          <el-button size="mini" @click="refund" v-if="order.status===4">退货退款</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">订单编号</el-col>
          <el-col :span="6" class="table-cell-title">发货单流水号</el-col>
          <el-col :span="6" class="table-cell-title">用户ID</el-col>
          <el-col :span="6" class="table-cell-title">支付方式</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell" style="font-size:12px">{{order.tradeNo}}</el-col>
          <el-col :span="6" class="table-cell">{{order.expressTradeNo}}</el-col>
          <el-col :span="6" class="table-cell">{{order.userID}}</el-col>
          <el-col :span="6" class="table-cell">{{order.payTypeText}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">物流单号</el-col>
          <el-col :span="6" class="table-cell-title">订单赠送豆子数</el-col>
          <el-col :span="6" class="table-cell-title">订单可退款数</el-col>
          <el-col :span="6" class="table-cell-title">活动信息</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{order.expressTradeNo}}</el-col>
          <el-col :span="6" class="table-cell">{{order.beans}}</el-col>
          <el-col :span="6" class="table-cell">{{order.refund}}</el-col>
          <el-col :span="6" class="table-cell">
            <el-popover
              placement="top-start"
              title="活动信息"
              width="200"
              trigger="hover"
              :content="order.count+''"
            >
              <span slot="reference">{{order.count}}</span>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
          <el-col :span="6" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{addressList.consignee}}</el-col>
          <el-col :span="6" class="table-cell">{{addressList.mobile}}</el-col>
          <el-col :span="6" class="table-cell">{{addressList.postalCode}}</el-col>
          <el-col :span="6" class="table-cell">
            <el-popover
              placement="top-start"
              title="收货地址"
              width="200"
              trigger="hover"
              :content="addressList.province+' '+addressList.region+' '+addressList.address+''"
            >
              <span
                slot="reference"
              >{{addressList.province+' '+addressList.region+' '+addressList.address+''}}</span>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.product"
        style="width: 100%;margin-top: 20px"
        border
      >
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.titleImg" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>产品名称：{{scope.row.productName}}</p>
            <p>产品ID：{{scope.row.productID}}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{scope.row.salePrice}}</p>
          </template>
        </el-table-column>
        <el-table-column label="可退款金额" width="120" align="center">
          <template slot-scope="scope">{{scope.row.refund}}</template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">{{scope.row.count}}</template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">￥{{scope.row.salePrice*scope.row.count}}</template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：
        <span class="color-danger">￥{{order.amount}}</span>
      </div>
      <div style="margin-top: 60px">
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">商品合计</el-col>
          <el-col :span="6" class="table-cell-title">运费</el-col>
          <el-col :span="6" class="table-cell-title">优惠券</el-col>
          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">￥{{order.amount}}</el-col>
          <el-col :span="6" class="table-cell">{{'暂无'}}</el-col>
          <el-col :span="6" class="table-cell">{{'暂无'}}</el-col>
          <el-col :span="6" class="table-cell">{{'暂无'}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">暂无</el-col>
          <el-col :span="6" class="table-cell">暂无</el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.amount}}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.amount}}</span>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog
      title="修改收货人信息"
      :append-to-body="true"
      :visible.sync="receiverDialogVisible"
      width="40%"
    >
      <el-form :model="receiverInfo" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input v-model="receiverInfo.consignee" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="receiverInfo.mobile" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input v-model="receiverInfo.postalCode" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <v-distpicker
            :province="receiverInfo.province"
            :city="receiverInfo.city"
            :area="receiverInfo.region"
            @selected="onSelectRegion"
          ></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="receiverInfo.address" type="textarea" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 退款 -->
    <el-dialog
      title="退货退款处理"
      :append-to-body="true"
      top="200px"
      :visible.sync="refundVisible"
      width="30%"
    >
      <el-form :model="refundList" ref="receiverInfoForm" label-width="90px">
        <el-form-item label="退款金额：">
          <el-input v-model="refundList.money" placeholder="不填写则退还全部金额" style="width: 200px"></el-input>元
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundVisible = false">返 回</el-button>
        <el-button type="primary" @click="RefundSubmit(6)">拒 绝</el-button>
        <el-button @click="RefundSubmit(5)">同 意</el-button>
      </span>
    </el-dialog>

    <xdelivery :deliveryVisible="deliveryVisible" :orderID="deliveryData" @hidden="hidden"></xdelivery>
    <xlogistics :logisticsVisible="logisticsVisible" :tradeNo="logisticsTradeNo" @hidden="hidden"></xlogistics>
  </div>
</template>

<script>
import axios from "axios";
import xdelivery from "./common/delivery_goods";
import xlogistics from "./common/LogisticsInformation";
export default {
  components: {
    xdelivery,
    xlogistics
  },
  data() {
    return {
      order: {},
      addressList: {},
      receiverDialogVisible: false,
      receiverInfo: {
        orderID: "",
        consignee: "",
        address: "",
        mobile: "",
        province: "",
        city: "",
        region: "",
        postalCode: ""
      },
      //发货
      deliveryVisible: false,
      deliveryData: {},
      //查快递
      logisticsVisible: false,
      logisticsTradeNo: {},
      //退款
      refundVisible: false,
      refundList: {}
    };
  },
  created() {
    this.getList();
  },
  watch: {
    $router: "getList"
  },
  methods: {
    /**
     * 修改用户收货地址
     */
    onSelectRegion(data) {
      this.receiverInfo.province = data.province.value;
      this.receiverInfo.city = data.city.value;
      this.receiverInfo.region = data.area.value;
    },
    editAddress() {
      this.receiverDialogVisible = true;
      this.receiverInfo.orderID = this.order.orderID;
      this.receiverInfo.consignee = this.order.addressContent.consignee;
      this.receiverInfo.address = this.order.addressContent.address;
      this.receiverInfo.mobile = this.order.addressContent.mobile;
      this.receiverInfo.province = this.order.addressContent.province;
      this.receiverInfo.city = this.order.addressContent.city;
      this.receiverInfo.region = this.order.addressContent.region;
      this.receiverInfo.postalCode = this.order.addressContent.postalCode;
    },
    handleUpdateReceiverInfo() {
      let self = this;
      axios
        .post("MallOrder/setAddress", self.receiverInfo)
        .then(function(response) {
          if (response.data.code === 1) {
            self.$message({
              message: response.data.msg,
              type: "success"
            });
            self.getList();
            self.receiverDialogVisible = false;
          } else {
            self.$message({
              message: response.data.msg,
              type: "warning"
            });
          }
        });
    },
    /**
     * 发货
     */
    delivery() {
      this.deliveryVisible = true;
      this.deliveryData = this.order.orderID;
    },
    hidden() {
      this.deliveryVisible = false;
      this.deliveryData = "";
      this.logisticsVisible = false;
      this.logisticsTradeNo = {};
      this.getList();
    },
    /**
     * 查询快递
     */
    expressInquiry() {
      this.logisticsVisible = true;
      this.logisticsTradeNo.orderID = this.order.orderID;
      this.logisticsTradeNo.tradeNo = this.order.tradeNo;
    },
    /**
     * 退款
     */
    refund() {
      this.refundVisible = true;
      this.refundList.orderID = this.order.orderID;
    },
    RefundSubmit(val) {
      this.refundList.status = val;
      this.$confirm("退款拒绝或确定后无法撤销, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.post("MallOrder/refund", this.refundList).then(response => {
            if (response.data.code === 1) {
              this.$message({
                message: response.data.msg,
                type: "success",
                offset: 100
              });
              this.refundVisible = false;
              this.refundList = {};
            } else {
              this.$message({
                message: response.data.msg,
                type: "warning",
                offset: 100
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /**
     * 基础数据处理
     */
    formatStepStatus(val) {
      if (val == -1 || val == -3 || val == 4) {
        return 1;
      } else if (val == 1) {
        return 2;
      } else if (val == 2) {
        return 3;
      } else if (val == 3) {
        return 4;
      }
    },
    getList() {
      let vm = this;
      axios
        .post("MallOrder/find", {
          orderID: sessionStorage.getItem("own_list_details")
        })
        .then(function(response) {
          let res = response.data;
          if (res.code === 1) {
            vm.order = res.data;
            vm.addressList = res.data.addressContent;
          } else {
            if (res.code === -14) {
              vm.$store.commit("logout", vm);
              vm.$router.push({
                name: "login"
              });
            } else {
              vm.$message({
                message: res.msg,
                offset: 100,
                type: "error"
              });
            }
          }
        });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 30px 100px 30px 100px;
}
.header {
  background: #fff;
  padding: 20px 10px 20px 10px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.color-danger {
  color: #f56c6c;
  font-size: 18px;
}
</style>

